<template>
	<view class="box w_h_100">
		<view class="" style="min-height: 200rpx;">
			<view class="" v-for="(item,index) in baner " :key='index'>
				<image :src="item.image" mode="widthFix" style="width: 100%;" @tap="mayi(item.url)"></image>
			</view>
		</view>


		<view class="second">
			<view class="columnx" style="position: relative;">
				<view v-for="(item,index) in list " :key='index' @tap="change(item.name)" style="text-align: center;">

					<image :src='item.img' mode="aspectFill" class="bracelet"></image>
					<view class="binding">
						{{item.name}}
					</view>

				</view>
				<!-- #ifdef  MP-ALIPAY  -->
				<button class="login" type="default" open-type="getAuthorize" @getAuthorize="onGetAuthorize"
					scope='phoneNumber' style="position: absolute;width: 100%;height: 120rpx;opacity: 0;"
					v-if="!openid">授权</button>
				<view class="" v-else>

				</view>
				<!-- #endif -->
			</view>
		</view>

		<view class="d_f serd">
			<view class="">
				——
			</view>
			<view class="card">
				推荐卡片
			</view>
			<view class="">
				——
			</view>
		</view>
		<view class="bottom">
			<view class="" v-for="(item,index) in lists " :key='index'>
				<image :src='item.image' style="width: 100%;margin-top: 26rpx;height: 180rpx;" @tap="changes(item.url)">
				</image>		
			</view>

		</view>
		<!-- #ifdef  MP-ALIPAY  -->
		<!-- 	<button class="login" type="default" open-type="getAuthorize" @getAuthorize="onGetAuthorize" @error="onAuthError" scope='phoneNumber'>授权手机号一键登录</button> -->
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		wxLogin,
		openSignDecrypt,
		getBanner

	} from '../../api/index.js'
	export default {
		data() {
			return {
				images: require('../../static/top.png'),
				openid: '',
				baner: [],
				
				lists: [
					// {

					// 	img: require('../../static/huafei.png')
					// },
					{

						img: require('../../static/mayi.png')
					},
					{

						img: require('../../static/nangua.png')
					},
					{

						img: require('../../static/liuliang.png')
					},
				],
				list: [{
						name: '我的订单',
						img: require('../../static/dingdan.png')
					},
					{
						name: '我的立减金',
						img: require('../../static/lijianjin.png')
					},
					{
						name: '我的优惠券',
						img: require('../../static/youhui.png')
					},
					{
						name: '联系客服',
						img: require('../../static/kefu.png')
					},



				],

			}
		},
		components: {

		},
		methods: {
			getdata() {
				getBanner().then((res) => {
					console.log(res)
					this.baner = res.data.banner
					this.lists=res.data.ad
				})
			},
			onGetAuthorize: function() {
				return new Promise((resolve, reject) => {
					my.getPhoneNumber({
						scopes: "auth_base",
						success: res => {
							var response = JSON.parse(res.response);
							let encry = response.response; //获取 encry  微信小程序叫这个名字
							console.log(response.response)
							openSignDecrypt({
								encryptedData: response.response
							}).then((rex) => {
								console.log(rex)
								uni.setStorageSync('openid', rex.data.openid)
								this.openid = uni.getStorageSync('openid')
							})
							resolve(res);
						},
						fail: res => {
							reject(res);
						}
					});
				});
			},
			//跳转蚂蚁宝
			mayi(e) {
				console.log(e)
				//支付宝蚂蚁保（免费领5元话费立减金）
				let link = "https://render.alipay.com/p/s/i/?scheme=" + encodeURIComponent(
						"alipays://platformapi/startapp?saId=10000007&clientVersion=3.7.0.0718&qrcode="
					) +
			encodeURIComponent(e)
				my.ap.navigateToAlipayPage({
					path: link
				})
			},
			changes(e) {
				console.log(e)
				// 	//支付宝蚂蚁保（免费领5元话费立减金）
				let link = "https://render.alipay.com/p/s/i/?scheme=" + encodeURIComponent(
						"alipays://platformapi/startapp?saId=10000007&clientVersion=3.7.0.0718&qrcode="
					) +
					encodeURIComponent(encodeURIComponent(e))
				my.ap.navigateToAlipayPage({
					path: link
				})
			},
			change(e) {
				console.log(e)
				if (e == '我的订单') {
					uni.navigateTo({
						url: '/pages/myorder/myorder'
					})
					return
				}
				if (e == '我的立减金') {
					uni.navigateTo({
						url: '/pages/lijianjin/lijianjin'
					})
					return
				}
				if (e == '我的优惠券') {
					uni.navigateTo({
						url: '/pages/myyouhui/myyouhui'
					})
					return
				}
				if (e == '联系客服') {
					uni.makePhoneCall({
						phoneNumber: '400-8825010',
						success: function() {
							console.log('拨打电话成功');
						},
						fail: function() {
							console.log('拨打电话失败');
						}
					});
					return
				}

			}

		},
		onLoad() {
this.getdata()
			// #ifdef MP-ALIPAY
			
			if (uni.getStorageSync('openid')) {

				this.openid = uni.getStorageSync('openid')
			}
			// 

			if(!uni.getStorageSync('openidH5')){
				my.getAuthCode({
					scopes: ['auth_user'],
					// 主动授权：auth_user，静默授权：auth_base或者其它scope。如需同时获取用户多项授权，可在 scopes 中传入多个 scope 值。
					success: (res) => {
						console.log(res)
						if (res.authCode) {
							wxLogin({
								code: res.authCode,
								type: 2
							}).then((rex) => {
								console.log(rex.data.openidH5)
								uni.setStorageSync('openidH5',rex.data.openidH5)
							})

						}
					},
				});
			}

			// #endif
		},
		watch: {

		},
		computed: {

		}
	}
</script>

<style scoped lang='scss'>
	.bottom {
		padding: 40rpx 30rpx 40rpx 30rpx;
	}

	.box {
		min-height: 100%;
		background-color: #f5f5f5;
	}

	.serd {
		justify-content: center;
		margin-top: 32rpx;
	}

	.card {


		margin-right: 12rpx;
		margin-left: 12rpx;
		font-weight: bold;
		color: #000000;
	}

	.second {
		width: 688rpx;
		height: 217rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		padding: 40rpx 0 40rpx 0;
	}

	.bracelet {
		width: 96rpx;
		height: 96rpx;
	}

	.columnx {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
margin-left: 30rpx;

	}

	.bind {
		width: 206rpx;
		height: 186rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding: 24rpx 0 26rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 32rpx;
	}

	.bingding {

		font-size: 22rpx;

		color: #393939;
	}
</style>
